const $ = el => document.querySelector(el)
const gets = el => [...document.querySelectorAll(el)]

gets('.tabs span').forEach( (span , i) =>{
    span.addEventListener('click' , ()=>{
        $('.active').classList.remove('active')
        $('.show').classList.remove('show')
        span.classList.add('active')
        gets('.item')[i].classList.add('show')
    })
})

gets('.bot div').forEach((div , i) =>{
    div.addEventListener('click' , ()=>{
        $('.color').classList.remove('color')
        div.classList.add('color')
    })
})
const ul = $('.list ul')
const swiper = $('.swiper-wrapper')
let list = []
async function init() {
    try {
        const res = await axios.get('http://zyxcl.xyz/exam_api/food')
        list = res.data.value[0].list
        render()
    } catch(e) {
        console.log(e)
    } finally {
        console.log('执行完毕')
    }
}
init()


function render() {
    console.log(list)
    ul.innerHTML = list.map(item =>{
        return `<li>
                    <img src="${item.imgUrl}" alt="">
                    <div class="info">
                        <h3>${item.name}</h3>
                        <div class="add">
                            <p>￥20</p>
                            <span>+</span>
                        </div>
                    </div>
                </li>`
        
    }).join('')
    swiper.innerHTML = list.map(it =>{
        return `<div class="swiper-slide"><img src="${it.imgUrl}" alt="" width=200></div>`
    }).join('')
}

var mySwiper = new Swiper ('.swiper', {
    autoplay:{
        delay:1000
    },
    // direction: 'vertical', // 垂直切换选项
    loop: true// 循环模式选项
})
console.log('Aaaa')


